<template>
    <div class="app_container">
        <el-button v-role="['/cmsFunctionAreaConfig/add']" type="primary" @click="openAdd" style="margin-bottom: 10px;">新增金刚区</el-button>

        <!-- 列表 -->
        <el-table :data="tableData" row-key="id" border>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="icon" label="图标（下版本弃用）" width="150"></el-table-column>
            <el-table-column label="图标" width="130">
                <template slot-scope="scope">
                    <el-image :src="scope.row.iconUrl" :preview-src-list="[scope.row.iconUrl]" fit="contain" style="width: 100px; height: 100px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="100"></el-table-column>
            <el-table-column prop="path" label="跳转path" width="330"></el-table-column>
            <el-table-column prop="sort" label="排序" width="80"></el-table-column>
            <el-table-column label="是否显示（总控）" width="140">
                <template slot-scope="scope">{{ scope.row.enable == 0 ? '不显示' : '' }}</template>
            </el-table-column>
            <el-table-column label="小程序端是否显示" width="140">
                <template slot-scope="scope">{{ scope.row.wechatApplet == 0 ? '不显示' : '' }}</template>
            </el-table-column>
            <el-table-column label="Android端是否显示" width="150">
                <template slot-scope="scope">{{ scope.row.android == 0 ? '不显示' : '' }}</template>
            </el-table-column>
            <el-table-column label="iOS端是否显示" width="120">
                <template slot-scope="scope">{{ scope.row.ios == 0 ? '不显示' : '' }}</template>
            </el-table-column>
            <el-table-column label="操作" width="70">
                <template slot-scope="scope">
                    <el-dropdown placement="bottom-start" @command="openSet">
                        <el-button size="mini" type="primary" icon="el-icon-s-tools"></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-role="['/cmsFunctionAreaConfig/update']" :command="{ type: 'edit', item: scope.row }">编辑</el-dropdown-item>
                            <el-dropdown-item v-role="['/cmsFunctionAreaConfig/delete']" :command="{ type: 'del', item: scope.row }">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <br />

        <!-- 新增弹窗 -->
        <el-dialog :visible.sync="showAdd" title="新增金刚区">
            <add @onCancel="showAdd = false" @onSubmit="onAddSubmit()"></add>
        </el-dialog>

        <!-- 编辑弹窗 -->
        <el-dialog :visible.sync="showEdit" title="编辑金刚区">
            <edit :editItem="editItem" @onCancel="showEdit = false" @onSubmit="onEditSubmit()"></edit>
        </el-dialog>
    </div>
</template>

<script>
import { apiGetFunctionAreaList, apiFunctionAreaDel } from "@/api/configManage.js";
import add from "./add.vue";
import edit from "./edit.vue";
export default {
    name: 'function_area_index',
    components: { add, edit },
    data() {
        return {
            tableData: [],
            showAdd: false,
            showEdit: false,
            editItem: "",
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            apiGetFunctionAreaList().then(res => {
                this.tableData = res.data;
            });
        },
        // 打开新增弹窗
        openAdd() {
            this.showAdd = true;
        },
        // 子组件确认新增
        onAddSubmit() {
            this.showAdd = false;
            this.getData();
        },
        // 设置
        openSet({ type, item }) {
            switch (type) {
                case "edit":
                    this.editItem = item
                    this.showEdit = true;
                    break;
                case "del":
                    this.del(item);
                    break;
            }
        },
        // 子组件确认编辑
        onEditSubmit() {
            this.showEdit = false;
            this.getData();
        },
        del(item) {
            this.$msgbox({
                title: '温馨提示',
                message: `删除 ${item.name}？`,
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonText: '确认'
            }).then(() => {
                apiFunctionAreaDel({ id: item.id }).then((res) => {
                    this.$message({ message: '操作成功', type: 'success' })
                    this.getData()
                })
            }).catch(() => {
                // 点击取消
            })
        },

    },
}
</script>

<style></style>